<template>
  <el-config-provider :locale="zhCn">
    <div class="app-container">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/settings">系统设置</el-menu-item>
        <el-menu-item index="/classification">视频分类</el-menu-item>
        <el-menu-item index="/merge">视频混搭</el-menu-item>
        <el-menu-item index="/intro-outro">片头片尾处理</el-menu-item>
        <el-menu-item index="/copywriting">文案处理</el-menu-item>
        <el-menu-item index="/watermark">水印处理</el-menu-item>
        <el-menu-item index="/football">足球图标管理</el-menu-item>
      </el-menu>

      <main class="main-content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </main>

      <footer class="app-footer">
        <p>视频处理工具 &copy; {{ new Date().getFullYear() }}</p>
      </footer>
    </div>
  </el-config-provider>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import { el } from 'element-plus/es/locales.mjs';

export default {
  name: 'App',
  setup() {
    const route = useRoute();
    const activeIndex = ref('/');

    const handleSelect = (key) => {
      activeIndex.value = key;
    };

    onMounted(() => {
      activeIndex.value = route.path;
    });

    return {
      activeIndex,
      handleSelect,
      zhCn
    };
  }
};
</script>

<style>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.app-footer {
  text-align: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-top: 1px solid #e4e7ed;
}
</style>